<gm:page title="NBA Mashup" authenticate="false">
    
  <style>
    div.body {
       font-family: arial, san-serif;
       padding:20px;
    }
    
    div.header {
    }
    
    div.header h1 {
      padding-left: 5px;
      font-size: 35px;
      color: #CC5500;
     }
    
    div.header h1 span {
      font-size: 20px;
      color: gray;
    }
    
    div.navbar {
      background: #CC5500;
      padding:5px;
      color: black;
      width:100%;
      font-weight:bold;
    }
    
    div.navbar .selected {
      color:white;
    }   
    
    div.navbar a {
      color:black !important;
    } 
    
   div.navbar .separator {
      padding-left:10px;
      padding-right:10px;
    }   
    
    div.schedule {
      float:left;
      width:25%;
      padding-top:15px;
      padding-right:20px
    }
    
    div.map {
      float:left;
      width:75%;
      padding-top:15px;
      
    }
    
    table.green-theme .gm-item-selected, div.green-theme .gm-item-selected {
      background-color: #286ea0;
      color: #FFFFFF;
    }
    .gm-pager-button {
      color: #3399FF;
    }
    #largeThumb .gm-image-container img {
      border: solid gray 1px;
    }
    #signInText {
      font-weight: bold;
      text-align: center;
    }
    #videosList img {
      border: solid black 1px;
    }    div.news {
      clear:both;
      width:100%;
      padding-top:50px;
    }
   
    .date {
      font-size:15px;
      color:gray;
      padding-bottom:10px;
      border-bottom: 1px solid #e6e6e6;
    }
    .opponent {
      font-size:15px
    }
    .location {
       color:gray;
    }
    .time {
      color:gray;
      font-size:15px;
    }
    .gm-gadget-list tbody.gm-item {
       border:none;
     }
    .teamName {
       padding:10px;
       font-size:15px;
       font-weight:bold;
       color:blue;
     }
    .infoData {
       color:gray;
       padding-right:5px;
       padding-top:10px;
    }
    div.gm-header {
      background:none;
      color: #112ABB;
      padding: 0;
    }
    
    
    .newsHeader {
      font-size:18px;
      color:#3399CC;
      padding:10 0 10 0;
    }       

    
   .goog-date-picker th,
   .goog-date-picker td { font: menu; text-align: center; font-size:14px;}
   .goog-date-picker td {
     font: menu; text-align: center; vertical-align: middle;
     border: inherit !important; border-width: 0px 1px 1px 0px;
     padding: 2px 6px;font-size:14px;
   }

  .goog-date-picker-menu-selected {
    background: #ffeac0;
   }

  .goog-date-picker-selected {
    background: #ffeac0 !important;
    color: blue !important;
   }

  .goog-date-picker-today { font-weight: bold !important;color:#aa0033;font-size:14px; }

  .goog-date-picker-head {
    background:#ffeac0;
  }
  </style>  
  
  <div class="gm-app-header">
    <h1><font size="5" color="blue">NBA Enthusiasts</font><br/></h1>
    <span><font size="3" color="3399CC"><b>News, Photos, Videos, Tracking your favorite NBA teams throughout the entire 2007-08 season...</b></font></span>    
  </div>
  
  <div class="body">
    <div style="font-size:15px;font-weight:bold;padding:10 5 10 5">Welcome to NBA Enthusiasts,which provides you with schedules (pick your favorite team and select a date on the calendar to see who they are playing with), news, videos, photos, and more! 
    We mash up data from other sites so you you only have to go to one place to find out what's happening with your favorite basketball teams. </div><br/><br/>
    <div>
      <font size="3"><b>Click the logo of your favorite team below:</b></font><br/><br/>
      <gm:list id="teamlist" data="http://www.soe.ucsc.edu/~fud/team.xml" pagesize="30" template="teamlogotemplate" onselect="switchTeam()"/><br/>  
      
      <!-- input schedule data here -->
      <gm:list id="scheduleList" data="${app}/foo" template="scheduletemplate">
        <gm:handleEvent src="scheduleMap"/>       
      </gm:list>
      <gm:item id="gameSchedule" data="${calschedules}" create="true" template="scheduletemplate">
        <gm:handleEvent src="calschedules"/>
      </gm:item>
    </div>
    <br/>
  
    <div class="schedule">
      <gm:calendar id="calschedules" data="${scheduleList}" ref="gd:when/@startTime" >
         <gm:handleEvent src="scheduleMap"/> 
      </gm:calendar><br/>
      <div style="clear:both">
        <gm:item id="game" data="${calschedules}" template="gametemplate">
          <gm:handleEvent src="calschedules"/>
        </gm:item>
      </div>  
    </div>   
    
    <div class="map">
      <gm:map id="scheduleMap" data="${scheduleList}" width="100%" height="500" control="large"
              infotemplate="maptemplate" latref="gd:lat" lngref="gd:long" maptypes="true">
        <gm:handleEvent src="calschedules"/>
      </gm:map>
    </div>
             
    <div class="news" align="center">
      <table>
        <tr>
          <td>
            <h1 style="color:#663300;text-align: center;">Lastest News</h1>
          </td>
          <td> 
            <gm:item id="teamNewsHeader" data="${teamlist}" template="headertemplate">
               <gm:handleEvent src="teamlist"/>
            </gm:item>
          </td>  
        </tr>
      </table>
               
      <table background="resources/background.jpg">  
        <tr rowspan="3">
          <td width="33%" align="center" class="newsHeader">NBA.com </td>
          <td width="33%" align="center" class="newsHeader">ESPN.com </td>
          <td width="33%" align="center" class="newsHeader">Yahoo Basketball</td>        
        </tr>    
        <tr>
          <td width="33%" valign="top"><gm:list id="nba" data="http://www.nba.com/rss/nba_rss.xml" template="newsArticles" pagesize="6" selection="false"/> </td>
          <td width="33%" valign="top"><gm:list id="espn" data="http://sports.espn.go.com/espn/rss/nba/news" template="newsArticles" pagesize="6" selection="false"/> </td>
          <td width="33%" valign="top"><gm:list id="yahoo" data="http://sports.yahoo.com/nba/rss.xml" template="newsArticles" pagesize="6" selection="false"/></td>
        </tr>     
      </table>
    </div>
             
    <div class="videos" align="center">
      <table>
        <tr>
          <td>
            <h1 style="color:#663300;padding-left:100px; padding-right:100px; text-align: center;"> Videos from YouTube </h1>
 
            <gm:item id="teamVideoHeader" data="${teamlist}" template="headertemplate">
               <gm:handleEvent src="teamlist"/>
            </gm:item>
          </td>           
        </tr>        
        <tr>  
          <td valign="top">
            <gm:container id="videoContainer">
              <gm:section id="videoSection" title="Media" style="background:#FFFFFF; border:solid #000000 5px">
                <table style="width:100%; border: 2px solid #286ea0; padding: 5px; height:500px">              
                  <tr width="100%">                     
                    <td colspan="4" align="center" style="padding-left:200px;padding-right:200px; border: 2px solid #CCCCCC; width:250px; height:30px;">
                      Watch video of your favorite team from YouTube
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 5px; width:270px; background:#FFFFFF;" valign="top">
                      <gm:list id="videosList" 
                               data="http://gdata.youtube.com/feeds/videos?vq=%22nba%22" 
                               pagesize="6"
                               template="videosListTemplate"/>
                    </td>
                    <td style="padding: 5px; background:#FFFFFF;" valign="middle">
                      <gm:item template="videoDetailTemplate">
                        <gm:handleEvent event="select" src="videosList"/>
                      </gm:item>
                    </td>
                  </tr>
                </table>
              </gm:section>
            </gm:container>
          </td>
        </tr>       
      </table>
    </div>  

  </div>
  
  <gm:template id="teamlogotemplate">
    <table>
       <tr>
         <td repeat="true" height="70" >
           <gm:image ref="atom:link[@rel='alternate']/@href" width="70" height="50" />
         </td>
       </tr>
    </table>
  </gm:template>
  
  <gm:template id="headertemplate">  
     <img src="resources/spacer.gif" alt=" " width="1" height="1" style="padding-right:2px; padding-left:2px;" /><h1 style="color:#663300;text-align: center;"> for <img src="resources/spacer.gif" alt=" " width="1" height="1" style="padding-right:2px; padding-left:2px;" /><gm:text ref="atom:title" /></h1>
  </gm:template>
  
  
  <gm:template id="maptemplate">
    <table>
      <tbody repeat="true">
      <tr>
        <td>
          <table width="300px">
            <tr>
              <td valign="top" align="center" class="teamName"><gm:text ref="atom:title"/></td>
            </tr>
            <tr>
             <td colspan="3" valign="top" align="center" class="infoLocation">
               <gm:text ref="gd:where/@valueString />
             </td>
            </tr>
    <!--        <tr>
              <td colspan="3" valign="top" class="infoData">
                About the <gm:text ref="atom:title" style="padding-left:2px"/>: <br/>
                 <gm:text ref="gd:opposinginfo"/>
              </td> 
            </tr>
     -->       
          </table>
          </td>                            
      </tr>
      </tbody>
    </table>
  </gm:template>
  
  <gm:template id="scheduletemplate">
    <table>
       <tr repeat="true">
         <td>           
           <gm:text ref="atom:title" />
         </td>
         <td>
           <gm:text ref="gd:where/@valueString"/>
         </td>
         <td>
           <gm:date ref="gd:when/@startTime"/>
         </td>
         <td>
           <gm:text ref="gd:lat"/>
         </td>
         <td>
           <gm:text ref="gd:long"/>
         </td>                  
         <td>
           <gm:editButtons text="true"/>
         </td>
       </tr>
    </table>
  </gm:template>
  
  <gm:template id="gametemplate">
    <table style="margin-right:20px">
      <tbody repeat="true">
        <tr>
          <td style="font-size:large;padding-top:15px;"><gm:text ref="atom:title"/> </td>
        </tr>
        <tr>
          <td style="padding-top:10px">Game Time: <gm:text ref="gd:when/@startTime" style="padding-left:3px"/></td>
        <tr>
        <tr>
          <td>Location:<gm:text ref="gd:where/@valueString" style="padding-left:3px"/></td>
        </tr>
<!--        <tr>
          <td style="padding-top:8px">
           About the <gm:text ref="atom:title" style="padding-left:2px"/>: <br/>
                 <gm:text ref="gd:opposinginfo"/>
          </td>
        </tr>
 -->       
      </tbody>
    </table>
  </gm:template>
    
  <gm:template id="newsArticles">
    <table width="100%">
        <tr repeat="true">
          <td style="padding:15px;"><gm:link style="color:#000066;text-decoration:underline;font-size:100%;font-weight:bold;" labelref="atom:title" ref="atom:link[@rel='alternate']/@href"/></td>
        </tr>
     </table>
  </gm:template>  
  
  <gm:template id="videosListTemplate">
    <table class="green-theme">
      <tr repeat="true">
        <td valign="top">
          <gm:image ref="media:group/media:thumbnail[@width='130']/@url" width="65" height="55" style="float:left; margin-right:10px"/>
          <gm:html ref="atom:title"/>            
        </td>
      </tr>
      <tfoot>
        <tr>
          <td><gm:pager/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>
   
  <gm:template id="videoDetailTemplate">
    <div style="width:100%" align="center">
      <gm:video ref="media:group/media:content[@type='application/x-shockwave-flash']/@url"/>
    </div>
  </gm:template>

  <script>
    var titleGPath = new GPath("atom:title");
    
    function switchTeam() {
      var myListData = google.mashups.getObjectById('teamlist').getData();
      var entry = google.mashups.getObjectById('teamlist').getSelectedEntry();
      var currentTeam = titleGPath.getValue(entry);
       
      if(currentTeam=='Houston Rockets') {
        google.mashups.getObjectById('scheduleList').setData('${app}/hou');
        google.mashups.getObjectById('nba').setData('http://www.nba.com/rockets/rss.xml'); 
        google.mashups.getObjectById('espn').setData('http://sports.espn.go.com/keyword/search?searchString=rockets&feed=rss&src=rss&rT=sports');
        google.mashups.getObjectById('yahoo').setData('http://sports.yahoo.com/nba/teams/hou/rss.xml');     
        google.mashups.getObjectById('videosList').setData('http://gdata.youtube.com/feeds/videos?vq=%22Houston%20Rockets%22'); 
      }
      else {
        google.mashups.getObjectById('scheduleList').setData('${app}/gsw');
        google.mashups.getObjectById('nba').setData('http://www.nba.com/warriors/rss.xml'); 
        google.mashups.getObjectById('espn').setData('http://sports.espn.go.com/keyword/search?searchString=warriors&feed=rss&src=rss&rT=sports');
        google.mashups.getObjectById('yahoo').setData('http://sports.yahoo.com/nba/teams/gsw/rss.xml');
        google.mashups.getObjectById('videosList').setData('http://gdata.youtube.com/feeds/videos?vq=%22Golden%20State%20Warriors%22'); 
      } 
    };    
    
  </script>  
  
  <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
  <script type="text/javascript">
    _uacct = "UA-2309750-1";
    urchinTracker();
  </script>

</gm:page>  
  

